d3에서 미리 정의 된 시작 위치 및 여백 수준으로 사각형 스택을 그리는 방법

이것의 JSFiddle.
시작 위치와 세로 여백이 정의되고 배열의 데이터를 사용할 때 svg 직사각형의 깔끔한 스택을 원합니다.
JSfiddle에서 출력 컨테이너는 원하는 결과를 보여주기 위해 수동으로 코딩됩니다. d3를 사용하여 얻는 방법? 나는 다음을 시도했다.
var inputs = [{ "text": "inleaf1", "col": "red"}, { "text": "inleaf2", "col": "blue"}, { "text": "inleaf3", " col ":"green "}];
var elementwidth = 120;
var elementheight = 50;
var inputstartx = 20;
var inputstarty = 20; /////////// y는 각 직사각형에 대해 변경되어야합니다.
var verticalmargin = 20;
var canvas = d3.select ( ". canvas");
var inputcontainer = d3.select ( "# input-container");
var inputleaf = inputcontainer
.data (입력)
.enter (). append ( "rect")
.attr ( "클래스", "입력 리프")
.attr ( "너비", 요소 너비)
.attr ( "height", elementheight)
.attr ( "x", inputstartx)
.attr ( "y", function (d, i) {
return Number (inputstarty) + (elementheight * i) + verticalmargin;
})
.attr ( "stroke", function (d) {
return d.col;
});